<template>
    <div class="box">
        <div class="ziti">
            <h1>欢迎使用智慧物流管理系统</h1>
        </div>
        <div class="img">
            <el-carousel :interval="4000" type="card" height="400px" indicator-position="outside" >
            <el-carousel-item v-for="item in imagesBox" :key="item.id">
                <img :src="item.idView" class="image" style="width:700px;height:540px;" />
            </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
export default {
    data(){
      return{
        imagesBox:[
            {id:0,idView:require("../../assets/1.jpg")},
            {id:1,idView:require("../../assets/2.jpg")},
            {id:2,idView:require("../../assets/4.jpg")},
            {id:3,idView:require("../../assets/3.jpg")},
            {id:4,idView:require("../../assets/5.jpg")},
            {id:5,idView:require("../../assets/6.jpg")},
            {id:6,idView:require("../../assets/9.jpg")},
            {id:7,idView:require("../../assets/7.jpg")},
            {id:8,idView:require("../../assets/10.jpg")},
            {id:9,idView:require("../../assets/8.jpg")},
            ],
        fiveNews: []
        }
    }
}
</script>

<style scoped>
.ziti{
    padding-top: 80px;
    color:  hsl(0, 75%, 48%);
}
.img{
    padding-top: 100px;
}
.ziti h1 {
  color: hsl(56, 71%, 60%);
}
</style>